import * as React from 'react'
import { Link } from 'react-router-dom'
import { Tabs, Carousel, Popover } from 'antd-mobile'
import { SearchBar, Icon, Button, FlatList, Image } from 'components'
import { End } from '../../viewComponent'
import { post, NotBean } from '../../utils'
import './ShopBus.less'

const all = require('../../assets/arrow_s_all.png')
const top = require('../../assets/arrow_s_top.png')
const bot = require('../../assets/arrow_s_bot.png')

const horizontal = require('../../assets/classfy.png')
const vertical = require('../../assets/classfy_v.png')

export default class ShopBus extends React.Component<any, any> {
    public state = {
        priceSelect: false,
        nextPrice: false,
        cxpriceSelect: false,
        cxnextPrice: false,
        sxpriceSelect: false,
        sxnextPrice: false,
        viewType: 'horizontal',
        cxviewType: 'horizontal',
        sxviewType: 'horizontal',
        data: [],
        popoverVisible0: false,
        popoverVisible1: false,
        popoverVisible2: false,
        categoryIndex: null,
        categoryId: '',
        secondTabsIndex: 0
    }

    private index: number = 1
    private topTabIndex: any = 0
    private shopBusPromotionRef: any
    private shopBusNewRef: any  
    private shopBusAllRef: any
    public render(): JSX.Element {
        const { priceSelect, nextPrice, viewType, cxpriceSelect, cxnextPrice, sxpriceSelect, sxnextPrice, cxviewType, sxviewType, popoverVisible0, popoverVisible1, popoverVisible2, categoryIndex } = this.state
        const { shopBusInfo, shopBusRX, shopBusPromotion, shopBusNew, shopBusAll, shopBusCategory } = this.props

        const tabs = [{
            title: '首页'
        }, {
            title: '商品'
        }, {
            title: '促销'
        }, {
            title: '上新'
        }]

        const spTabs = [{
            title: '综合',
        }, {
            title: '销量',
        }, {
            title: <div>价格<img className="select_arrow" src={priceSelect ? nextPrice ? bot : top : all} /></div>,
            key: 'price',
        }, {
            title: '',
        }, {
            title: ''
        }]
        const cxTabs = [{
            title: '综合',
        }, {
            title: '销量',
        }, {
            title: <div>价格<img className="select_arrow" src={cxpriceSelect ? cxnextPrice ? bot : top : all} /></div>,
            key: 'price',
        }, {
            title: '',
        }, {
            title: ''
        }]
        const sxTabs = [{
            title: '综合',
        }, {
            title: '销量',
        }, {
            title: <div>价格<img className="select_arrow" src={sxpriceSelect ? sxnextPrice ? bot : top : all} /></div>,
            key: 'price',
        }, {
            title: '',
        }, {
            title: ''
        }]
        return (
            <div className={`shop_bus ${(popoverVisible0 || popoverVisible1 || popoverVisible2) ? 'overflowHidden' : ''}`}>
                <div className="bg">
                    <img className="shop_bus__img" src={require('../../assets/shop_bus__bg.png')} />
                </div>
                <div className="shop_bus_header">
                    <SearchBar
                        className="shop_bus_search"
                        divider={false}
                        fixed={true}
                        right={<div><Icon type="classify" style={{ marginRight: '0.3rem' }} /></div>}
                    />
                    <div className="flex shop_bus_title">
                        <img src={shopBusInfo.logo} />
                        <div className="flex_1">
                            <div className="name">{shopBusInfo.name}</div>
                            <div className="guanzhu">{shopBusInfo.seller_collect_count}人关注</div>
                        </div>
                        {shopBusInfo.is_seller_collect === 0 ? <Button className="btn" onClick={() => {this.handleCollectShop(1)}}><Icon type="plus" />关注</Button> : <Button className="btn shop_bus_cancelCollect"  onClick={() => {this.handleCollectShop(2)}}><span>取消关注</span></Button>}

                    </div>
                    
                    <Tabs
                        tabBarBackgroundColor="initial"
                        tabBarActiveTextColor="#fff"
                        tabBarInactiveTextColor="#fff"
                        tabBarTextStyle={{ fontSize: '0.85rem' }}
                        tabs={tabs}
                        swipeable={false}
                        prerenderingSiblingsNumber={0}
                        destroyInactiveTab={true}
                        animated={false}
                        onTabClick={this.handleTopTab}
                    >
                        <div className="tabs_info">
                            <Carousel
                                className="shop_bus_carouse"
                                dots={true}
                                dotActiveStyle={{
                                    background: '#fff',
                                    width: '0.85rem',
                                    height: '0.1rem',
                                    borderRadius: '0.05rem',
                                }}
                                dotStyle={{
                                    width: '0.85rem',
                                    height: '0.1rem',
                                    borderRadius: '0.05rem',
                                    background: 'rgba(255,255,255, 0.6)'
                                }}
                            >
                                <img src={require('../../assets/shop_bus.png')} />
                                <img src={require('../../assets/shop_bus.png')} />
                                <img src={require('../../assets/shop_bus.png')} />
                            </Carousel>
                            <div className="guess flex_center">
                                <img src={require('../../assets/guess.png')} />
                            </div>
                            <FlatList
                                style={{
                                    padding: '0 0.4rem',
                                    backgroundColor: '#fff',
                                    display: 'flex',
                                    flexWrap: 'wrap'
                                }}
                                ListEmptyComponent={NotBean}
                                data={shopBusRX}
                                onRefresh={this.getBusRX}
                                renderItem={(item: any, index: number) => {
                                    return (
                                        <div className="live_item"  key={index}>
                                            <Link to={`/shopDetail/${item.id}`}>
                                                <div className="live_item_img">
                                                    <Image src={item.pic} />
                                                </div>
                                                <div className="live_item_content">
                                                    <div className="live_item_content_title">{item.name}</div>
                                                    <div className="live_item_content_label">
                                                        ¥ {item.price}+{item.price_q}
                                                        <span>恒豆</span>
                                                    </div>
                                                </div>
                                            </Link>
                                        </div>
                                    )
                                }}
                            />
                            <End />
                        </div>
                        <div className="tabs_info">
                            <div className="detail_classfy flex_center">
                                <img onClick={this.handleTabView} src={viewType === 'horizontal' ? horizontal : vertical} />
                            </div>
                            <div className="class_cd" >
                                <div onClick={this.handleClickPopover}>
                                    <Popover
                                        mask={true} 
                                        onVisibleChange={this.handleClickSelectCategory}
                                        overlay={[<div className="shop_bus_popover" key="detail">
                                            {
                                            shopBusCategory.length > 0 && shopBusCategory.map((item: any, index: number) => {
                                                    return (
                                                        <Button onClick={this.handleSelectCategory.bind(this, index, item.id, 0)} className={`btn ${(categoryIndex === index) ? ' active' : ''}`} key={index}>{item.name}</Button>
                                                    )
                                                })
                                            }
                                        </div>]}
                                    >
                                         <div className="classfy">分类</div>
                                    </Popover>
                                </div>
                                
                                <Tabs
                                    tabs={spTabs}
                                    swipeable={false}
                                    tabBarActiveTextColor="#fa0000"
                                    tabBarInactiveTextColor="#333333"
                                    tabBarTextStyle={{ fontSize: '0.75rem', width: '22% !important' }}
                                    onTabClick={this.handleTab}
                                    prerenderingSiblingsNumber={0}
                                    destroyInactiveTab={true}
                                    animated={false}
                                >
                                    <div>
                                        <FlatList
                                            ref={(ref) => {this.shopBusAllRef = ref}}
                                            ListEmptyComponent={NotBean}
                                            style={{
                                                padding: '0.5rem 0.4rem',
                                                backgroundColor: '#fff',
                                                display: 'flex',
                                                flexWrap: 'wrap'
                                            }}
                                            data={shopBusAll}
                                            onRefresh={this.handleAllGetReflashData.bind(this, 0)}
                                            renderItem={(item: any, index: number) => {
                                                // console.log(data)
                                                if (viewType === 'horizontal') {
                                                    return (
                                                        <Link key={index} to={`/shopDetail/${item.id}`}>
                                                            <div className="shop_bus_item flex">
                                                                <Image className="shop_bus_item__img" src={item.pic} />
                                                                <div className="shop_bus_item_info flex_1 divider">
                                                                    <div className="shop_bus_item_info__title">{item.name}</div>
                                                                    <div className="shop_bus_item_info__number flex">
                                                                        <span className="DINPro flex_justify">¥ {item.price}+{item.price_q}</span>
                                                                        <span className="hendou flex_justify">恒豆</span>
                                                                        <div className="flex_justify">
                                                                            <Button className="btn" tick={false}>
                                                                            {
                                                                                (item.type === 1) ? '促销' : '新品'
                                                                            }
                                                                            </Button>
                                                                        </div>
                                                                    </div>
                                                                    <div className="shop_bus_item_info__label">{item.sale_number}人已购买</div>
                                                                </div>
                                                            </div>
                                                        </Link>
                                                        
                                                    )
                                                } else {
                                                    return (
                                                        <div className="live_item" key={index} >
                                                            <Link to={`/shopDetail/${item.id}`}>
                                                                <div className="live_item_img">
                                                                    <Image src={item.pic} />
                                                                </div>
                                                                <div className="live_item_content">
                                                                    <div className="live_item_content_title">{item.name}</div>
                                                                    <div className="live_item_content_label">
                                                                        ¥ {item.price}+{item.price_q}<span>恒豆</span>
                                                                    </div>
                                                                </div>
                                                            </Link>
                                                        </div>
                                                    )
                                                }
                                            }}
                                        />
                                        <End />
                                    </div>
                                </Tabs>
                            </div>
                        </div>
                        <div className="tabs_info">
                            <div className="detail_classfy flex_center" onClick={this.handleTabCXView}>
                                <img src={cxviewType === 'horizontal' ? horizontal : vertical} />
                            </div>
                            <div className="class_cd">
                                <Popover
                                    mask={true}
                                    visible={popoverVisible1}
                                    onVisibleChange={this.handleClickSelectCategory1}
                                    overlay={[<div className="shop_bus_popover" key="detail">
                                        {
                                        shopBusCategory.length > 0 && shopBusCategory.map((item: any, index: number) => {
                                                // console.log(item)
                                                return (
                                                    <Button onClick={this.handleSelectCategory.bind(this, index, item.id, 1)} className={`btn ${(categoryIndex === index) ? ' active' : ''}`} key={index}>{item.name}</Button>
                                                )
                                            })
                                        }
                                    </div>]}
                                >
                                <div className="classfy">分类</div>
                                </Popover>
                                <Tabs
                                    tabs={cxTabs}
                                    swipeable={false}
                                    tabBarActiveTextColor="#fa0000"
                                    tabBarInactiveTextColor="#333333"
                                    tabBarTextStyle={{ fontSize: '0.75rem', width: '22% !important' }}
                                    prerenderingSiblingsNumber={0}
                                    onTabClick={this.handleCXTab}
                                    destroyInactiveTab={true}
                                    animated={false}
                                >
                                    <div>
                                        <FlatList
                                            ref={(ref) => {this.shopBusPromotionRef = ref}}
                                            ListEmptyComponent={NotBean}
                                            style={{
                                                padding: '0.5rem 0.4rem',
                                                backgroundColor: '#fff',
                                                display: 'flex',
                                                flexWrap: 'wrap'
                                            }}
                                            data={shopBusPromotion}
                                            renderItem={(item: any, index: number) => {
                                                if (cxviewType === 'horizontal') {
                                                    return (
                                                        <Link key={index} to={`/shopDetail/${item.id}`}>
                                                            <div className="shop_bus_item flex">
                                                                <Image className="shop_bus_item__img" src={item.pic} />
                                                                <div className="shop_bus_item_info flex_1 divider">
                                                                    <div className="shop_bus_item_info__title">{item.name}</div>
                                                                    <div className="shop_bus_item_info__number flex">
                                                                        <span className="DINPro flex_justify">¥ {item.price}+{item.price_q}</span>
                                                                        <span className="hendou flex_justify">恒豆</span>
                                                                        <div className="flex_justify">
                                                                            <Button className="btn" tick={false}>
                                                                            {
                                                                                (item.type === 1) ? '促销' : '新品'
                                                                            }
                                                                            </Button>
                                                                        </div>
                                                                    </div>
                                                                    <div className="shop_bus_item_info__label">{item.sale_number}人已购买</div>
                                                                </div>
                                                            </div>
                                                        </Link>
                                                    )
                                                } else {
                                                    return (
                                                        <div className="live_item" key={index} >
                                                            <Link to={`/shopDetail/${item.id}`}>
                                                                <div className="live_item_img">
                                                                    <Image src={item.pic} />
                                                                </div>
                                                                <div className="live_item_content">
                                                                    <div className="live_item_content_title">{item.name}</div>
                                                                    <div className="live_item_content_label">
                                                                        ¥ {item.price}+{item.price_q}<span>恒豆</span>
                                                                    </div>
                                                                </div>
                                                            </Link>
                                                        </div>
                                                    )
                                                }
                                            }}
                                            onRefresh={this.handleCXGetReflashData.bind(this, 1)}
                                        />
                                        <End />
                                    </div>
                                </Tabs>
                            </div>
                        </div>
                        <div className="tabs_info">
                            <div className="detail_classfy flex_center" onClick={this.handleTabSXView}>
                                <img src={sxviewType === 'horizontal' ? horizontal : vertical} />
                            </div>
                            <div className="class_cd">
                                <Popover
                                    mask={true}
                                    onVisibleChange={this.handleClickSelectCategory2}
                                    visible={popoverVisible2}
                                    overlay={[<div className="shop_bus_popover" key="detail">
                                        {
                                        shopBusCategory.length > 0 && shopBusCategory.map((item: any, index: number) => {
                                                // console.log(item)
                                                return (
                                                    <Button onClick={this.handleSelectCategory.bind(this, index, item.id, 2)} className={`btn ${(categoryIndex === index) ? ' active' : ''}`} key={index}>{item.name}</Button>
                                                )
                                            })
                                        }
                                    </div>]}
                                >
                                <div className="classfy">分类</div>
                                </Popover>
                                <Tabs
                                    tabs={sxTabs}
                                    swipeable={false}
                                    tabBarActiveTextColor="#fa0000"
                                    tabBarInactiveTextColor="#333333"
                                    tabBarTextStyle={{ fontSize: '0.75rem', width: '22% !important' }}
                                    prerenderingSiblingsNumber={0}
                                    onTabClick={this.handleSXTab}
                                    destroyInactiveTab={true}
                                    animated={false}
                                    
                                >
                                    <div>
                                        <FlatList
                                            ref={(ref) => {this.shopBusNewRef = ref}}
                                            ListEmptyComponent={NotBean}
                                            style={{
                                                padding: '0.5rem 0.4rem',
                                                backgroundColor: '#fff',
                                                display: 'flex',
                                                flexWrap: 'wrap'
                                            }}
                                            data={shopBusNew}
                                            renderItem={(item: any, index: number) => {
                                                if (sxviewType === 'horizontal') {
                                                    return (
                                                        <Link key={index} to={`/shopDetail/${item.id}`}>
                                                            <div className="shop_bus_item flex">
                                                                <Image className="shop_bus_item__img" src={item.pic} />
                                                                <div className="shop_bus_item_info flex_1 divider">
                                                                    <div className="shop_bus_item_info__title">{item.name}</div>
                                                                    <div className="shop_bus_item_info__number flex">
                                                                        <span className="DINPro flex_justify">¥ {item.price}+{item.price_q}</span>
                                                                        <span className="hendou flex_justify">恒豆</span>
                                                                        <div className="flex_justify">
                                                                            <Button className="btn" tick={false}>
                                                                            {
                                                                                (item.type === 1) ? '促销' : '新品'
                                                                            }
                                                                            </Button>
                                                                        </div>
                                                                    </div>
                                                                    <div className="shop_bus_item_info__label">{item.sale_number}人已购买</div>
                                                                </div>
                                                            </div>
                                                        </Link>
                                                    )
                                                } else {
                                                    return (
                                                        <div className="live_item" key={index}>
                                                            <Link  to={`/shopDetail/${item.id}`}>
                                                                <div className="live_item_img">
                                                                    <Image src={item.pic} />
                                                                </div>
                                                                <div className="live_item_content">
                                                                    <div className="live_item_content_title">{item.name}</div>
                                                                    <div className="live_item_content_label">
                                                                        ¥ {item.price}+{item.price_q}<span>恒豆</span>
                                                                    </div>
                                                                </div>
                                                            </Link>
                                                        </div>
                                                    )
                                                }
                                            }}
                                            onRefresh={this.handleSXGetReflashData.bind(this, 2)}
                                        />
                                        <End />
                                    </div>
                                </Tabs>
                            </div>
                        </div>
                    </Tabs>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
        this.getCategoryData()
    }
    private handleClickSelectCategory = (visible: boolean) => {
        // console.log(visible)
        this.setState({
            popoverVisible0: visible
        })
    }
    private handleClickSelectCategory1 = (visible: boolean) => {
        // console.log(visible)
        this.setState({
            popoverVisible1: visible
        })
    }
    private handleClickSelectCategory2 = (visible: boolean) => {
        // console.log(visible)
        this.setState({
            popoverVisible2: visible
        })
    }
    private handleClickPopover = (e: any) => {
        e.stopPropagation()
    }
    private handleCollectShop = (state: any) => {
        const { userInfo, match } = this.props
        if (!userInfo.id) {
            this.props.history.push('/loginMode')
        }
        post('goodsapi/sellerCollect', {
            id: match.params.id,
            userId: userInfo.id,
            state: state,
        }).then((data: any) => {
            this.getData()
        })
    }
    private handleSelectCategory = (i: any, id: any, status: any) => {
        let cid = id
        let index = i
        const { match } = this.props
        const uid = match.params.id
        if (this.state.categoryId === id) {
            cid = null
            index = null
        }
        this.setState({categoryIndex: index, categoryId: cid}, () => {this.getScreenData(status, {
            id: uid,
            type: this.topTabIndex,
            shelvesId: this.state.categoryId,
        })})
    }
    private getCategoryData = () => {
        const { match, SET_SHOP_BUSCATEGORY } = this.props
        post('sellerapi/sellerCategory', {
            id: match.params.id
        }).then((data: any) => {
            // console.log(data)
            SET_SHOP_BUSCATEGORY(data)
        })
    }
    private getData() {
        const { match, userInfo, SET_SHOP_BUS } = this.props
        post('sellerapi/sellerInfo', {
            id: match.params.id,
            userId: userInfo.id,
            page: this.index
        }).then((data: any) => {
            // console.log(data)
            SET_SHOP_BUS(data)
        })
    }

    private getBusRX = () => {
        const { match, SET_SHOP_BUS_RX } = this.props
        post('sellerapi/sellerGoodsSale', {
            id: match.params.id,
            page: this.index
        }).then((data: any) => {
            SET_SHOP_BUS_RX(data)
        })
    }
    private getScreenData = (status: any, par: any) => {
        const params = par
        const { SET_SHOP_BUSPROMOTION, SET_SHOP_BUSALL, SET_SHOP_BUSNEW, shopBusPromotion, shopBusNew, shopBusAll } = this.props
        post('sellerapi/sellerGoodsList', params).then((data: any) => {
            if (this.index === 1) {
                switch (status) {
                    case 0:
                    SET_SHOP_BUSALL(data.data); break
                    case 1:
                    SET_SHOP_BUSPROMOTION(data.data); break
                    case 2:
                    SET_SHOP_BUSNEW(data.data); break
                    default: 
                }
            } else {
                switch (status) {
                    case 0:
                    let obj = JSON.parse(JSON.stringify(shopBusAll))
                    SET_SHOP_BUSALL(obj.concat(data.data))
                    this.shopBusAllRef.finishLoad()
                    break
                    case 1:
                    let obj1 = JSON.parse(JSON.stringify(shopBusPromotion))
                    SET_SHOP_BUSPROMOTION(obj1.concat(data.data))
                    this.shopBusPromotionRef.finishLoad()                    
                    break
                    case 2:
                    let obj2 = JSON.parse(JSON.stringify(shopBusNew))
                    SET_SHOP_BUSNEW(obj2.concat(data.data))
                    this.shopBusNewRef.finishLoad()                                        
                    break
                    default: 
                }
            }
            this.index ++
        })
    }
    // private getParams = (status: any) => {
    //     const { match } = this.props
    //     const id = match.params.id
    //     let params = {
            
    //     }
    //     switch (status) {
    //         case 0: return params = {
    //             id: id,
    //         }
    //         case 1: return params = {
    //             id: id,
    //             type: status.toString()
    //         }
    //         case 2: return params = {
    //             id: id,
    //             type: status.toString()
    //         }
    //         default: return params = {
    //             id: id,
    //         }
    //     }
    // }
    private handleTopTab = (tabs: any, index: any) => {
        this.setState({
            priceSelect: false,
            nextPrice: false,
            cxpriceSelect: false,
            cxnextPrice: false,
            sxpriceSelect: false,
            sxnextPrice: false,
            secondTabsIndex: 0
        })
        if (index > 1) {
            this.topTabIndex = (index - 1).toString()
        } else {
            this.topTabIndex = 0
        }
        this.index = 1
    }
    private handleTab = (tab: any, index: number) => {
        const { nextPrice } = this.state
        const { match } = this.props
        const id = match.params.id
        let params: any
        this.index = 1
        if (index === 2) {
            const a = () => {
                if (this.state.priceSelect) {
                    const b = () => {
                        if (this.state.nextPrice) {
                            params = {
                                id: id,
                                type: '0',
                                shelvesId: this.state.categoryId,
                                by: 'price_all',
                                sort: 'DESC', // 升序
                                page: this.index
                            }
                            
                        } else {
                            params = {
                                id: id,
                                type: '0',
                                shelvesId: this.state.categoryId,
                                by: 'price_all',
                                sort: 'ASC', // 降序
                                page: this.index
                            }
                        }
                        this.getScreenData(0, params)
                    }
                    this.setState({ priceSelect: true, nextPrice: !nextPrice}, b)
                }
            }
            setTimeout(() => {this.setState({priceSelect: true}, a)}, 10)
        } else {
            this.setState({
                priceSelect: false,
                nextPrice: false
            })
        }
        this.setState({
            secondTabsIndex: index
        })
    }
    private handleCXTab = (tab: any, index: number) => {
        const { match } = this.props
        const id = match.params.id
        let params: any
        const { cxnextPrice } = this.state
        this.index = 1
        if (index === 2) {
            const a = () => {
                if (this.state.cxpriceSelect) {
                    const b = () => {
                        if (this.state.cxnextPrice) {
                            params = {
                                id: id,
                                type: '1',
                                shelvesId: this.state.categoryId,
                                by: 'price_all',
                                sort: 'DESC', // 升序
                                page: this.index                                
                            }
                            
                        } else {
                            params = {
                                id: id,
                                type: '1',
                                shelvesId: this.state.categoryId,
                                by: 'price_all',
                                sort: 'ASC', // 降序
                                page: this.index
                            }
                        }
                        this.getScreenData(1, params)
                    }
                    this.setState({ cxpriceSelect: true, cxnextPrice: !cxnextPrice}, b)
                }
            }
            this.setState({cxpriceSelect: true}, a)
        } else {
            this.setState({
                cxpriceSelect: false,
                cxnextPrice: false
            })
        }
        this.setState({
            secondTabsIndex: index
        })
    }

    private handleSXTab = (tab: any, index: number) => {
        const { sxnextPrice } = this.state
        const { match } = this.props
        const id = match.params.id
        let params: any
        this.index = 1
        if (index === 2) {
            const a = () => {
                if (this.state.sxpriceSelect) {
                    const b = () => {
                        if (this.state.sxnextPrice) {
                            params = {
                                id: id,
                                type: '2',
                                shelvesId: this.state.categoryId,
                                by: 'price_all',
                                sort: 'DESC', // 升序
                                page: this.index
                            }
                            
                        } else {
                            params = {
                                id: id,
                                type: '2',
                                shelvesId: this.state.categoryId,
                                by: 'price_all',
                                sort: 'ASC', // 降序
                                page: this.index
                            }
                        }
                        this.getScreenData(2, params)
                    }
                    this.setState({ sxpriceSelect: true, sxnextPrice: !sxnextPrice}, b)
                }
            }
            this.setState({sxpriceSelect: true}, a)
        } else {
            this.setState({
                sxpriceSelect: false,
                sxnextPrice: false
            })
        }
        this.setState({
            secondTabsIndex: index
        })
    }
    // 无限加载
    private handleAllGetReflashData = (status: any) => {
        const { match } = this.props
        const { secondTabsIndex } = this.state
        const id = match.params.id
        let params: any
        if (this.state.priceSelect) {
            if (this.state.nextPrice) {
                params = {
                    id: id,
                    type: '0',
                    shelvesId: this.state.categoryId,
                    by: 'price_all',
                    sort: 'DESC', // 升序
                    page: this.index
                }
                
            } else {
                params = {
                    id: id,
                    type: '0',
                    shelvesId: this.state.categoryId,
                    by: 'price_all',
                    sort: 'ASC', // 降序
                    page: this.index
                }
            }
            this.getScreenData(0, params)
        } else {
            if (secondTabsIndex === 0) {
                params = {
                    id: id,
                    type: this.topTabIndex,
                    shelvesId: this.state.categoryId,
                    page: this.index
                }
            }
            if (secondTabsIndex === 1) {
                params = {
                    id: id,
                    type: '0',
                    by: 'sale_number ',
                    sort: 'DESC',
                    shelvesId: this.state.categoryId,
                    page: this.index
                }
            }
            this.getScreenData(0, params)
        }
        
    }
    // 无限加载
    private handleCXGetReflashData = (status: any) => {
        const { secondTabsIndex } = this.state
        const { match } = this.props
        const id = match.params.id
        let params: any
        if (this.state.cxpriceSelect) {
            if (this.state.cxnextPrice) {
                params = {
                    id: id,
                    type: '1',
                    shelvesId: this.state.categoryId,
                    by: 'price_all',
                    sort: 'DESC', // 升序
                    page: this.index
                }
                
            } else {
                params = {
                    id: id,
                    type: '1',
                    shelvesId: this.state.categoryId,
                    by: 'price_all',
                    sort: 'ASC', // 降序
                    page: this.index
                }
            }
            this.getScreenData(1, params)
        } else {
            if (secondTabsIndex === 0) {
                params = {
                    id: id,
                    type: this.topTabIndex,
                    shelvesId: this.state.categoryId,
                    page: this.index
                }
            }
            if (secondTabsIndex === 1) {
                params = {
                    id: id,
                    type: '1',
                    by: 'sale_number ',
                    sort: 'DESC',
                    shelvesId: this.state.categoryId,
                    page: this.index
                }
            }
            this.getScreenData(1, params)
        }
    }
    // 无限加载
    private handleSXGetReflashData = (status: any) => {
        const { match } = this.props
        const { secondTabsIndex } = this.state
        const id = match.params.id
        let params: any
        if (this.state.sxpriceSelect) {
            if (this.state.sxnextPrice) {
                params = {
                    id: id,
                    type: '2',
                    shelvesId: this.state.categoryId,
                    by: 'price_all',
                    sort: 'DESC', // 升序
                    page: this.index
                }
                
            } else {
                params = {
                    id: id,
                    type: '2',
                    shelvesId: this.state.categoryId,
                    by: 'price_all',
                    sort: 'ASC', // 降序
                    page: this.index
                }
            }
            this.getScreenData(2, params)
        }  else {
            if (secondTabsIndex === 0) {
                params = {
                    id: id,
                    type: '2',
                    shelvesId: this.state.categoryId,
                    page: this.index
                }
            }
            if (secondTabsIndex === 1) {
                params = {
                    id: id,
                    type: '2',
                    by: 'sale_number ',
                    sort: 'DESC',
                    shelvesId: this.state.categoryId,
                    page: this.index
                }
            }
            this.getScreenData(2, params)
        }
    }
    private handleTabView = () => {
        const { viewType } = this.state
        if (viewType === 'horizontal') {
            this.setState({
                viewType: 'vertical'
            })
        } else {
            this.setState({
                viewType: 'horizontal'
            })
        }
    }

    private handleTabCXView = () => {
        const { cxviewType } = this.state
        if (cxviewType === 'horizontal') {
            this.setState({
                cxviewType: 'vertical'
            })
        } else {
            this.setState({
                cxviewType: 'horizontal'
            })
        }
    }

    private handleTabSXView = () => {
        const { sxviewType } = this.state
        if (sxviewType === 'horizontal') {
            this.setState({
                sxviewType: 'vertical'
            })
        } else {
            this.setState({
                sxviewType: 'horizontal'
            })
        }
    }
}